<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { userAnswerApi } from '@/api/userAnswer'

const route = useRoute()
const userAnswerGroupId = route.params.groupId
const userInfo = JSON.parse(sessionStorage.getItem("pmp-userInfo")) || {};
const userId = userInfo.userId || "";
const userName = userInfo.realName || userInfo.username  || "";
const evaluationResult = ref({
  reNum: 0,
  result: '',
  userAnswerId: ''
})

const getEvaluationResult = async () => {
  const res = await userAnswerApi.getMultiQuestionnaireEvaluationResult(
    userAnswerGroupId
  );
  if (res.success) {
    evaluationResult.value = res.data[0]
  }
}

// 下载文件工具函数
const downloadBlobFile = (data, fileName) => {
  const blob = new Blob([data]);
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
};

// 下载报告
const downloadReport = async () => {
  try {
    const res = await userAnswerApi.downLoadWord(
      userAnswerGroupId,
      userId
    );
    if (res) {
      downloadBlobFile(res.data, `${userName}的问题性手机使用报告.docx`);
    } else {
      error.value = "下载报告失败";
    }
  } catch (err) {
    console.error("Error downloading report:", err);
  }
};

onMounted(() => {
  getEvaluationResult()
})
</script>

<template>
  <div class="min-h-screen bg-[#f8f9fb]">
    <!-- 顶部蓝色区域 -->
    <div class="bg-[#258aff] text-white py-16 px-10 flex flex-col md:flex-row items-center justify-between rounded-b-3xl">
      <!-- 左侧标题 -->
      <div class="flex-1 mb-10 md:mb-0">
        <div class="text-3xl md:text-4xl font-bold mb-4">您在问题性手机使用上的特质水平为</div>
        <div class="text-5xl md:text-6xl font-extrabold mb-2">{{ evaluationResult.reNum !== null ? evaluationResult.reNum.toFixed(2) : '加载中...' }}</div>
        <div class="text-base opacity-80 mb-6">你的测评结果已生成，点击下方按钮可下载个性化分析报告。</div>

      </div>
      <!-- 右侧环形图 -->
      <div class="flex-1 flex justify-center items-center">
        <div class="relative w-64 h-64">

          <!-- <svg class="w-full h-full" viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="90" stroke="#e5e7eb" stroke-width="20" fill="none"/>
            <circle
              cx="100" cy="100" r="90"
              :stroke-dasharray="2 * Math.PI * 90"
              :stroke-dashoffset="2 * Math.PI * 90 * (1 - score / 100)"
              stroke="#fff"
              stroke-width="20"
              fill="none"
              stroke-linecap="round"
              style="transition: stroke-dashoffset 1s;"
            />
          </svg>
          <div class="absolute inset-0 flex flex-col items-center justify-center">
            <div class="text-4xl font-bold text-[#258aff]">{{ score }}%</div>
            <div class="text-base text-white mt-2">综合得分</div>
          </div>

          <div class="absolute left-0 top-1/2 -translate-y-1/2 text-xs text-white" style="transform: translate(-60px, -50%);">
            {{ chartData[0].label }}<br>{{ chartData[0].value }}%
          </div>
          <div class="absolute right-0 top-1/4 text-xs text-white" style="transform: translate(60px, -50%);">
            {{ chartData[1].label }}<br>{{ chartData[1].value }}%
          </div>
          <div class="absolute right-0 bottom-1/4 text-xs text-white" style="transform: translate(60px, 50%);">
            {{ chartData[2].label }}<br>{{ chartData[2].value }}%
          </div>
          <div class="absolute left-0 bottom-1/2 text-xs text-white" style="transform: translate(-60px, 50%);">
            {{ chartData[3].label }}<br>{{ chartData[3].value }}%
          </div> -->
        </div>
      </div>
    </div>

    <!-- 下方白色区域 -->
    <div class="bg-white rounded-3xl shadow-lg mt-[-40px] mx-auto max-w-6xl p-10 flex flex-col md:flex-row items-start justify-between">
      <!-- 左侧测评结果 -->
      <div class="flex-1 pr-10">
        <div class="text-2xl font-bold mb-4">测评结果</div>
        <div class="text-gray-600 leading-relaxed">
          {{ evaluationResult.result }}
        </div>
      </div>
      <!-- 右侧下载卡片 -->
      <div class="w-full md:w-80 mt-10 md:mt-0 flex-shrink-0">
        <div class="bg-[#258aff] rounded-2xl p-8 flex flex-col items-center shadow-lg">
          <div class="text-white text-lg font-bold mb-2">下载你的个性化</div>
          <div class="text-white text-2xl font-extrabold mb-6">report（Word）</div>
          <button
            @click="downloadReport"
            class="cursor-pointer w-full bg-white text-[#258aff] font-bold py-3 rounded-xl shadow hover:bg-blue-100 transition"
          >
            立即下载
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.container {
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}
</style>
